<template>
  <div>
    <div id="bg">
      <div id="container">
        <div id="first">
        <!-- 板块列表 -->
        <h3>板块列表</h3>
        <hr style="margin-top: 8px;">

        <el-row :gutter="20">
          <el-col :span="4" style="padding-left: 0;padding-right: 0;">
            <el-badge :value="2" class="item">
              <div class="grid-content bg-purple">
                <a href="/home/communitymodulelist"><img src="../../assets/a1.png" alt=""></a>
                <div>
                  <a href="/home/communitymodulelist">情报站</a>
                  <p>ACGN各种情报信息集中地</p>
                </div>
              </div>
            </el-badge>
          </el-col>
          <el-col :span="4" offset="1">
            <el-badge :value="49" class="item">
              <div class="grid-content bg-purple">
                <a href="/home/communitymodulelist"><img src="../../assets/a2.png" alt=""></a>
                <div>
                  <a href="xxx">三次元</a>
                  <p>我和你处在一个次元，请告诉我你的故事</p>
                </div>
              </div>
            </el-badge>
          </el-col>
          <el-col :span="4" offset="1">
            <el-badge :value="8" class="item">
              <div class="grid-content bg-purple">
                <a href="/home/communitymodulelist"><img src="../../assets/a3.png" alt=""></a>
                <div>
                  <a href="xxx">求助</a>
                  <p>有什么问题需要帮助吗？喵喵喵。在这里各</p>
                </div>
              </div>
            </el-badge>
          </el-col>
          <el-col :span="4" offset="1">
            <el-badge :value="2" class="item">
              <div class="grid-content bg-purple">
                <a href="/home/communitymodulelist"><img src="../../assets/a4.png" alt=""></a>
                <div>
                  <a href="xxx">扩列</a>
                  <p>拍肩勾♂搭找基友，来这里发布</p>
                </div>
              </div>
            </el-badge>
          </el-col>
          <el-col :span="4" offset="1">
            <el-badge :value="0" class="item">
              <div class="grid-content bg-purple">
                <a href="/home/communitymodulelist"><img src="../../assets/a5.png" alt=""></a>
                <div>
                  <a href="xxx">Cosplay</a>
                  <p>喵~场照，正片Cosplay相关等相关内容请向这</p>
                </div>
              </div>
            </el-badge>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="4" style="padding-left: 0;padding-right: 0;">
            <el-badge :value="0" class="item">
              <div class="grid-content bg-purple">
                <a href="/home/communitymodulelist"><img src="../../assets/a6.png" alt=""></a>
                <div>
                  <a href="xxx">壁纸</a>
                  <p>喵特资源集中地，欢迎大家来分享手中的好东西</p>
                </div>
              </div>
            </el-badge>
          </el-col>
          <el-col :span="4" offset="1">
            <el-badge :value="0" class="item">
              <div class="grid-content bg-purple">
                <a href="/home/communitymodulelist"><img src="../../assets/a7.png" alt=""></a>
                <div>
                  <a href="xxx">绘画</a>
                  <p>喵特资源集中地，欢迎大家来掏出手中的宝贝</p>
                </div>
              </div>
            </el-badge>
          </el-col>
          <el-col :span="4" offset="1">
            <el-badge :value="0" class="item">
              <div class="grid-content bg-purple">
                <a href="/home/communitymodulelist"><img src="../../assets/a8.png" alt=""></a>
                <div>
                  <a href="xxx">侧耳倾听</a>
                  <p>此声只应天上有,人间能得几回闻~~</p>
                </div>
              </div>
            </el-badge>
          </el-col>
          <el-col :span="4" offset="1">
            <el-badge :value="0" class="item">
              <div class="grid-content bg-purple">
                <a href="/home/communitymodulelist"><img src="../../assets/a9.png" alt=""></a>
                <div>
                  <a href="xxx">宅学</a>
                  <p>当你看到这个的时候，你已经告别了现充。</p>
                </div>
              </div>
            </el-badge>
          </el-col>
          <el-col :span="4" offset="1">
            <el-badge :value="0" class="item">
              <div class="grid-content bg-purple">
                <a href="/home/communitymodulelist"><img src="../../assets/a10.png" alt=""></a>
                <div>
                  <a href="xxx">自拍</a>
                  <p>欢迎发布自己美美的自拍照</p>
                </div>
              </div>
            </el-badge>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="4" style="padding-left: 0;padding-right: 0;">
            <el-badge :value="0" class="item">
              <div class="grid-content bg-purple">
                <a href="/home/communitymodulelist"><img src="../../assets/a11.png" alt=""></a>
                <div>
                  <a href="xxx">宅舞</a>
                  <p>缓歌慢舞，矫若游龙</p>
                </div>
              </div>
            </el-badge>
          </el-col>
          <el-col :span="4" offset="1">
            <el-badge :value="0" class="item">
              <div class="grid-content bg-purple">
                <a href="/home/communitymodulelist"><img src="../../assets/a12.png" alt=""></a>
                <div>
                  <a href="xxx">穿越</a>
                  <p>千秋无绝色！悦目是佳人！倾国倾城貌！惊为</p>
                </div>
              </div>
            </el-badge>
          </el-col>
          <el-col :span="4" offset="1">
            <el-badge :value="0" class="item">
              <div class="grid-content bg-purple">
                <a href="/home/communitymodulelist"><img src="../../assets/a13.png" alt=""></a>
                <div>
                  <a href="xxx">短漫画</a>
                  <p>发布各种同人小漫画、日常短漫画</p>
                </div>
              </div>
            </el-badge>
          </el-col>
          <el-col :span="4" offset="1">
            <el-badge :value="0" class="item">
              <div class="grid-content bg-purple">
                <a href="/home/communitymodulelist"><img src="../../assets/a14.png" alt=""></a>
                <div>
                  <a href="xxx">活动</a>
                  <p>喵特官方线上活动区</p>
                </div>
              </div>
            </el-badge>
          </el-col>
          <el-col :span="4" offset="1">
            <el-badge :value="0" class="item">
              <div class="grid-content bg-purple">
                <a href="/home/communitymodulelist"><img src="../../assets/a15.png" alt=""></a>
                <div>
                  <a href="xxx">二手交易</a>
                  <p>二次元相关物品道具交易专区</p>
                </div>
              </div>
            </el-badge>
          </el-col>
        </el-row>
        </div>

        <!-- <hr> -->
        <div id="second">
          <div id="four">
            <h4>热门排行</h4>
            <hr style="border-color: #FCFCFC;">
            <ul>
              <li class="lidd">
                <el-tag type="danger" size="mini" effect="dark">1</el-tag>
                <el-tooltip class="item" effect="light" content="什么？怎么就一张？没了！那就快来扩列吧朋友们！" placement="bottom-start">
                  <a href="xxx">什么？怎么就一张？没了...</a>
                </el-tooltip>
                <a href="xxx">邬西SA</a>
              </li>
              <li class="lidd">
                <el-tag type="warning" size="mini" effect="dark">2</el-tag>
                <el-tooltip class="item" effect="light" content="【王者荣耀 嫦娥原皮cos】预告 团圆佳节 嫦..." placement="bottom-start">
                  <a href="xxx">【王者荣耀 嫦娥原皮cos】...</a>
                </el-tooltip>
                <a href="xxx">coser云歌</a>
              </li>
              <li class="lidd">
                <el-tag type="success" size="mini" effect="dark">3</el-tag>
                <el-tooltip class="item" effect="light" content="东方project｜博丽灵梦" placement="bottom-start">
                  <a href="xxx">东方project｜博丽灵梦</a>
                </el-tooltip>
                <a href="xxx">物部弥生</a>
              </li>
              <li class="lidd">
                <el-tag type="info" size="mini" effect="dark">4</el-tag>
                <el-tooltip class="item" effect="light" content="【王者荣耀 嫦娥原皮cos】预告 团圆佳节 嫦..." placement="bottom-start">
                  <a href="xxx">EVA｜渚薰</a>
                </el-tooltip>
                <a href="xxx">物部弥生</a>
              </li>
              <li class="lidd">
                <el-tag type="info" size="mini" effect="dark">5</el-tag>
                <el-tooltip class="item" effect="light" content="【王者荣耀 嫦娥原皮cos】预告 团圆佳节 嫦..." placement="bottom-start">
                  <a href="xxx">【王者荣耀 嫦娥原皮cos】...</a>
                </el-tooltip>
                <a href="xxx">邬西SA</a>
              </li>
              <li class="lidd">
                <el-tag type="info" size="mini" effect="dark">6</el-tag>
                <el-tooltip class="item" effect="light" content="【王者荣耀 嫦娥原皮cos】预告 团圆佳节 嫦..." placement="bottom-start">
                  <a href="xxx">【王者荣耀 嫦娥原皮cos】...</a>
                </el-tooltip>
                <a href="xxx">邬西SA</a>
              </li>
              <li class="lidd">
                <el-tag type="info" size="mini" effect="dark">7</el-tag>
                <el-tooltip class="item" effect="light" content="【王者荣耀 嫦娥原皮cos】预告 团圆佳节 嫦..." placement="bottom-start">
                  <a href="xxx">【王者荣耀 嫦娥原皮cos】...</a>
                </el-tooltip>
                <a href="xxx">邬西SA</a>
              </li>
              <li class="lidd">
                <el-tag type="info" size="mini" effect="dark">8</el-tag>
                <el-tooltip class="item" effect="light" content="【王者荣耀 嫦娥原皮cos】预告 团圆佳节 嫦..." placement="bottom-start">
                  <a href="xxx">【王者荣耀 嫦娥原皮cos】...</a>
                </el-tooltip>
                <a href="xxx">邬西SA</a>
              </li>
              <li class="lidd">
                <el-tag type="info" size="mini" effect="dark">9</el-tag>
                <el-tooltip class="item" effect="light" content="【王者荣耀 嫦娥原皮cos】预告 团圆佳节 嫦..." placement="bottom-start">
                  <a href="xxx">【王者荣耀 嫦娥原皮cos】...</a>
                </el-tooltip>
                <a href="xxx">邬西SA</a>
              </li>
            </ul>
          </div>
          <div id="three">
            <ul>
              <li class="lida">
                <div class="aone">
                  <h3>日常</h3>
                  <el-button icon="el-icon-notebook-2" type="warning" size="mini" round>文 章</el-button>
                  <p>彧笙哦 <span>发布于 2023-03-24 17:22:36</span></p>
                  <div class="atwo">
                    <img src="https://img.nyato.com/data/upload/2023/0324/17/641d6bdad2a02.png!180x180cut" alt="">
                    <img src="https://img.nyato.com/data/upload/2023/0324/17/641d6bdc645c1.png!180x180cut" alt="">
                  </div>
                </div>
              </li>
              <hr style="border-color: #FCFCFC;">
              <li class="lida">
                <div class="aone">
                  <h3>散兵/流浪者</h3>
                  <el-button icon="el-icon-notebook-2" type="warning" size="mini" round>文 章</el-button>
                  <p>公子染血 <span>发布于2023-03-18 22:57:23</span></p>
                  <div class="atwo">
                    <img src="https://img.nyato.com/data/upload/2023/0318/23/6415d6d8f110a.png!180x180cut" alt="">
                    <img src="https://img.nyato.com/data/upload/2023/0318/23/6415d6f8c1c01.png!180x180cut" alt="">
                  </div>
                </div>
              </li>
              <hr style="border-color: #FCFCFC;">
            </ul>
          </div>
          
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    
  }
</script>

<style lang="scss" scoped>

</style>

<style>
  .el-main {
    padding: 0;
    margin: 0;
  }
  .el-row {
    margin-top: 20px;
  }
  .el-col img{
    height: 80px;
    width: 80px;
  }
  .el-col div {
    float: right;
  }
  .el-col a {
    font-size: 18px;
    color: black;
    text-decoration: none;
    padding-left: 5px;

  }
  .el-col p {
    font-size: 12px;
    margin-top: 3px;
    padding-left: 5px;

  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
    display: flex;
  }
  #bg {
    background-color: #F5F5F5;
  }
  #container {
    width: 1200px;
    margin: 0 auto;
  }
  #first {
    padding: 15px;
    background-color: #FFFFFF;
    box-shadow: 0 1px 3px rgb(0 0 0 / 10%);
    /* box-sizing: border-box; */
  }
  #first h3 {
    color: #F39800;
  }
  #second {
    margin: 20px 0 0;
  }
  #second #three {
    padding: 0 20px 0;
    width: 68%;
    background-color: #FFFFFF;
    box-shadow: 0 1px 3px rgb(0 0 0 / 10%);
  }
  #second #three ul {
    padding: 0 10px 0;
  }
  #second ul .lida {
    list-style: none;
    padding: 20px 0;
  }
  #second #three ul .lida .aone h3 {
    font-size: 18px;
  }
  #second #three ul .lida .aone p {
    color: #8E8E8E;
    font-size: 12px;
    margin-top: 3px;
  }
  #second #three ul .lida .aone p span {
    margin-left: 10px;
  }
  #second #three ul .lida .aone .atwo {
    margin-top: 10px;
  }
  #second #three ul .lida .aone .atwo img {
    height: 160px;
    width: 160px;
  }
  #second #three ul .lida .aone .atwo img:nth-child(n+2) {
    margin-left: 10px;
  }
  #second #three ul .lida .aone .el-button {
    font-weight: bold;
    font-size: 13px;
    float: right;
  }
  #second #four {
    float: right;
    background-color: #FFFFFF;
    box-shadow: 0 1px 3px rgb(0 0 0 / 10%);
    width: 26%;
    padding: 10px;
  }
  #second #four h4 {
    color: #F39800;
    margin-bottom: 10px;
  }
  #second #four .lidd {
    list-style: none;
    padding: 5px 0;
  }
  #second #four .lidd .el-tooltip {
    margin-left: 10px;
    width: 200px;
    display: inline-block;
    font-size: 14px;
    color: black;
  }
  #second #four .lidd a{
    text-decoration: none;
    color: #BEBEBE;
    font-size: 12px;
  }
</style>
